<template>
  <div class="psychological_picture">
    <navigate>心理图片</navigate>
    <div class="tab_bar">
      <div
        v-for="(item, index) in tabBar"
        :key="index"
        class="item_bar"
        :class="currentBar == index ? 'active_bar' : ''"
        @click="chooseBar(item.id, index)"
      >
        <div class="item_txt">{{ item.name }}</div>
        <div class="item_line" v-if="currentBar == index"></div>
      </div>
    </div>
    <div class="picture_cont" v-if="pictureList.length > 0">
      <div class="picture_box">
        <div class="picture_num">该分类下共有图片: {{ pictureTotal }}张</div>
        <div class="check_txt">查看图片</div>
        <div class="picture_total">
          <img :src="currentImg.file" alt="" class="first_img" />
          <div class="img_info">
            第{{ pictureIndex }}张/共{{ pictureTotal }}张
          </div>
        </div>
        <div class="picture_list">
          <div
            v-for="(item, index) in pictureList"
            :key="index"
            class="item_picture"
          >
            <img :src="item.file" alt="" @click="checkImg(item, index)" />
            <div>第{{ index + 1 }}张</div>
          </div>
        </div>
      </div>
      <div class="picture_det">
        <div class="det_head">
          <div class="line"></div>
          <div class="tit">图片详情</div>
        </div>
        <div class="det_list">
          <div class="det_info">
            <div class="det_tit">{{ currentImg.name }}</div>
            <div class="det_desc">
              <div class="det_show">
                <div>图片序号：{{ pictureIndex }}/{{ pictureTotal }}</div>
                <div class="pic_label">
                  图片标签：
                  <span>{{
                    currentImg.label ? currentImg.label.join("、 ") : ""
                  }}</span>
                </div>
                <div>
                  分辨率：{{ currentImg.width }}*{{ currentImg.height }}
                </div>
              </div>
              <div class="carousel_btn" @click="carouselImg">自动轮播</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryPicList,
  queryPicType,
} from "@/api/funcation/psychologicalPicture";
export default {
  data() {
    return {
      pictureIndex: 1,
      currentImg: {},
      pictureTotal: null,
      currentBar: 0,
      tabBar: [],
      pictureList: [],
      pageSize: 10,
      page: 1,
    };
  },
  created() {
    this.getPicType();
    this.getPicList();
  },
  mounted() {},
  methods: {
    checkImg(item, index) {
      this.pictureIndex = index + 1;
      this.currentImg = item;
    },
    async getPicType() {
      let res = await queryPicType();
      this.tabBar = res.data;
      this.getPicList(this.tabBar[0].id);
    },

    async getPicList(id) {
      let par = {
        pageSize: this.pageSize,
        page: this.page,
        type_id: id,
      };
      let res = await queryPicList(par);
      this.pictureList = res.data.data || [];
      this.pictureTotal = res.data.total;
      if (this.pictureTotal > 0) {
        this.checkImg(this.pictureList[0], 0);
      }
    },

    chooseBar(id, index) {
      this.currentImg = {};
      this.currentBar = index;
      this.getPicList(id);
    },

    carouselImg() {
      this.$router.push({
        path: "/pictureBrowse",
        query: {
          pictureList: JSON.stringify(this.pictureList),
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.psychological_picture {
  background-color: #f4f6fa;
  color: #333333;
}

.tab_bar {
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-x: scroll;
  color: #333333;
  font-size: 14px;
  padding: 0 20px;
  width: 100%;
  height: 54.33px;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
}

.item_bar {
  margin-right: 39px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}

.active_bar {
  font-weight: bold;
  color: #00aeff;
}

.item_line {
  position: absolute;
  bottom: -8.33px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 13.33px;
  height: 5.33px;
  background: linear-gradient(
      -10deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #00aeff;
  border-radius: 2.67px;
  opacity: 0;
  transition: opacity 0.3s;
}

.active_bar .item_line {
  opacity: 1;
}

.item_bar:last-child {
  margin-right: 0;
}

.picture_cont {
  margin: 0 10px;
}

.picture_box {
  padding: 18px 10px;
  background: #ffffff;
  border-radius: 6.67px;
}

.picture_num {
  opacity: 0.5;
  font-size: 12px;
}

.check_txt {
  font-size: 18.67px;
  margin-top: 16.67px;
}

.picture_total {
  position: relative;
  margin: 16.77px 0 10px;
}

.first_img {
  width: 100%;
  height: 183.33px;
}

.img_info {
  position: absolute;
  top: 13.33px;
  left: 13.33px;
  font-size: 12px;
  color: #ffffff;
}

.picture_list {
  display: flex;
  overflow: hidden;
  overflow-x: scroll;
}

.picture_list::-webkit-scrollbar {
  display: none;
}

.item_picture {
  margin-left: 6.67px;
}

.item_picture img {
  width: 118.67px;
  height: 66.67px;
  border-radius: 4.67px;
}

.item_picture div {
  color: #aaaaaa;
  font-size: 12px;
  text-align: center;
}

.picture_det {
}

.det_head {
  display: flex;
  align-items: center;
  margin: 15.67px 0;
}

.det_head .line {
  width: 5.33px;
  height: 15.33px;
  background: linear-gradient(
      -10deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #2aa1ec;
  border-radius: 2.67px;
}

.det_head .tit {
  font-size: 15.33px;
  font-weight: bold;
  margin-left: 10px;
}

.det_list {
  margin-top: 26.33px;
}

.det_info {
  margin-bottom: 10px;
  border-radius: 6.67px;
  padding: 16px 14px;
  background-color: #fff;
}

.det_tit {
  font-size: 16.67px;
  line-height: 26px;
  margin-bottom: 26.33px;
}

.det_desc {
  display: flex;
  align-items: center;
}

.det_show {
  flex: 1;
  opacity: 0.8;
  font-size: 12px;
  line-height: 12px;
  color: #555555;
}
.pic_label {
  line-height: 20px;
  margin: 13.33px 0;
}

.carousel_btn {
  width: 86.67px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: #00aeff;
  border-radius: 6.67px;
  opacity: 0.8;
  font-size: 12px;
  color: #ffffff;
}
</style>
